<template>
    <div class="forum-list" style="padding: 20,20;">
      <h2 style="text-align: center;">我的反馈</h2>
      <el-table :data="postList" style="width: 100%;" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
        <el-table-column prop="content" label="内容"></el-table-column>
        <el-table-column prop="time" label="反馈时间"></el-table-column>
        <el-table-column prop="id" label="链接">
          <template slot-scope="scope">
            <router-link :to="{ name: 'ResDetail', params: { id: scope.row.id } }">
              查看详情
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="操作"> 
            <template slot-scope="scope">
                <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除吗？"
                @confirm="handleDelete(scope.row.id)"
              >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
                </el-popconfirm>
            </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="text-align:center; margin-top:20px; ">
      </el-pagination>
  
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        postList: [], // 论坛列表
        currentPage: 1, // 当前页码
        pageSize: 10, // 每页显示的数据量
        total: 0,// 数据总条数
      }
    },
    mounted() {
      if(!this.$store.getters.getUser.id){
        this.$message.error("请登录后再进行查看！");
      }else{
      this.getpostList()
      }
    },
    methods: {
      // 获取申请列表
      getpostList() {
        // 调用后端接口获取数据
        console.log(this.$store.getters.getUser.id)
        this.request.get('/suggest/id', {
          params: {
            page: this.currentPage,
            size: this.pageSize,
            user_id : this.$store.getters.getUser.id
          }
        }).then((response) => {
          const data = response.data
          console.log(data)
          this.postList = data.data.list
          this.total = data.data.total
        }).catch(error => {
          console.log(error)
        })
      },
      // 每页显示数据量改变时触发
      handleSizeChange(size) {
        this.pageSize = size
        this.getpostList()
      },
      // 当前页码改变时触发
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage
        this.getpostList()
      },
      handleDelete(id){
        this.request.post("/suggest/delete/" + id )
        .then((response) => {
          this.$message.success("删除成功");
          this.getpostList();
        }).catch(error => {
          console.log(error)
         })
       }
    }
  }
  </script>